<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown.</title>
    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">

    <link href="stylesheets/screen.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
    <link href="stylesheets/mermaid.forest.css" rel="stylesheet" type="text/css"/>
    <link href="stylesheets/solarized_light.css" rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="javascripts/lib/mermaid.js"></script>
    <script src="javascripts/all.js" type="text/javascript"></script>
    <script src="javascripts/highlight.pack.js" type="text/javascript"></script>

    <script>
        var g = function (hljs) {
            var r = "[a-z'][a-zA-Z0-9_']*", c = "(" + r + ":" + r + "|" + r + ")";
            var keyw = {
                keyword: 'graph sequenceDiagram participant loop end',
                typename: 'Note',
                literal: "false true left right"
            };
            return {
                case_insensitive: false,
                aliases: ["mermaid"],
                k: keyw,
                i: 'for',
                c: [{
                    cN: "function",
                    b: "^" + r + "\\s*\\(",
                    e: "->",
                    rB: !0,
                    i: "\\(|#|//|/\\*|\\\\|:|;",
                    starts: {
                        e: ";|\\.", k: keyw, c: [
                            {cN: "comment", b: "%", e: "$"}
                        ]
                    }
                },
                    {cN: "comment", b: "%", e: "$"}
                ]
            };
        };
        hljs.registerLanguage('mermaid', g);
        hljs.initHighlightingOnLoad();
        $(function () {
            setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
        });
        var callback = function(){
            alert('A callback was triggered');
        }
    </script>
</head>

<body class="index">
<a href="#" id="nav-button">
      <span>
        NAV
        <img src="images/navbar.png"/>
      </span>
</a>

<div class="tocify-wrapper">
    <img src="images/logo.png"/>

    <div class="lang-selector" style="display:none">
        <a href="#" data-language-name="shell">shell</a>
        <a href="#" data-language-name="javascript">javascript</a>
        <a href="#" data-language-name="html">html</a>
        <a href="#" data-language-name="css">css</a>
    </div>
    <div class="search">
        <input type="text" class="search" id="input-search" placeholder="Search">
    </div>
    <ul class="search-results"></ul>
    <div id="toc">
    </div>
    <ul class="toc-footer">
        <div style="margin-left:5px;">
            <a href="https://github.com/knsv/mermaid" class="github-button" >Star</a>
            <a href="https://github.com/knsv/mermaid" class="github-button">Fork</a>
            <a href="https://github.com/knsv/mermaid/archive/master.zip" class="github-button">Download</a>
        </div>
        <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
        <li><a href='http://github.com/tripit/slate' style="color:grey">Documentation Powered by Slate</a></li>
    </ul>
</div>
<div class="page-wrapper">
    <div class="dark-box"></div>
    <div class="content">
        {{{contents}}}

    </div>
    <div class="dark-box">
        <div class="lang-selector">
            <a href="#" data-language-name="shell">shell</a>
            <a href="#" data-language-name="ruby">ruby</a>
            <a href="#" data-language-name="python">python</a>
        </div>
    </div>
</div>
</body>
</html>
